<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- form 容器  -->
    <form >
        <label >点击提交搜索</label>
        <!-- input 通过 type 设置不同的外观 -->
        <div></div>
        <div>
            <label>姓名：</label>
            <input type="text" placeholder="请输入姓名">
        </div>
        <div>
            <label>密码：</label>
            <input type="password" placeholder="请输入密码">
        </div>
        <div>
            <label>性别：</label>
            <!-- 相同的name 让浏览器知道是一组 -->
            <input id="girl" type="radio" name="female">   
            <!-- label for 关联指定的 id 属性 实现点击联动 -->
            <label for="girl">女</label>
            <input id="boy" type="radio" name="female">
            <label for="boy">男</label>
        </div>
        <div>
            <!-- value 获取的是数据，label 中放置的是给用户看的数据 -->
            <label >爱好：</label>
            <input id="football" type="checkbox" value="1">   
            <!-- label for 关联指定的 id 属性 实现点击联动 -->
            <label for="football">足球</label>
            <input id="basketball" type="checkbox" value="1">
            <label for="basketball">篮球</label>
        </div>
        <div>
            <label>介绍：</label>
            <textarea name="" id="" placeholder="文本域"></textarea>
        </div>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
    </form>

    <form action="https://www.baidu.com/s" >
        <div>
            <!-- button type 设置按钮的类型
            submit 提交 结合form 表单，提交数据给指定的url【action='url'】
            如果需要提交，需要给 表单元素 设置 name 属性
            reset 重置 ，重置所在form 标签内的元素 -->
            <input type="text" placeholder="搜索关键字" name="wd">
            <button type="submit">提交</button>
        </div>
    </form>
     


    <form action="#">
        <div>
          <label for="name">姓名: </label>
          <input id="name" type="text" placeholder="请输入姓名">
        </div>
        <div>
          <label for="password">密码: </label>
          <input id="password" type="password" placeholder="请输入密码">
        </div>
        <div>
          <label>性别: </label>
          <input type="radio" name="gender" value="男">男
          <input type="radio" name="gender" value="女">女
        </div>
        <div>
          <label>爱好: </label>
          <input type="checkbox" name="hobby" value="足球">足球
          <input type="checkbox" name="hobby" value="篮球">篮球
          <input type="checkbox" name="hobby" value="羽毛球">羽毛球
        </div>
        <div>
          <label for="intro">自我介绍: </label>
          <textarea name="intro" id="intro" cols="20" rows="10"></textarea>
        </div>
        <div>
          <input type="submit" value="登录">
          <input type="reset" value="重置">
        </div>
    </form>
</body>
</html>